
<template>
  <el-dialog
    v-bind="$attrs"
    v-on="$listeners"
    @open1="onOpen"
    @close="onClose"
    :title="title"
    :close-on-click-modal="false"
  >
    <!--     对话框打开后是否可以点击后边灰色区域关闭对话框 -->
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-col :span="23" v-if="title===titleMap.updateData">
          <el-form-item label="学生学号" >
            <el-input
              v-model="formData.stuId"
              placeholder="请输入学生学号"
              :maxlength="50"
              clearable
              prefix-icon="el-icon-user-solid"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="学生姓名" prop="stuName">
            <el-input
              v-model="formData.stuName"
              placeholder="请输入学生姓名"
              :maxlength="50"
              clearable
              prefix-icon="el-icon-user-solid"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="学生年龄" prop="stuAge">
            <el-input
              v-model="formData.stuAge"
              placeholder="请输入学生年龄"
              :maxlength="50"
              clearable
              prefix-icon="el-icon-user-solid"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="班级名称" prop="classId">
            <el-select
              v-model="formData.classId"
              placeholder="请选择班级名称"
              :maxlength="50"
              clearable
              prefix-icon="el-icon-user-solid"
              :style="{ width: '100%' }"
            >
            
            <el-option v-for='item in classData' 
            :key="item.classId" 
            :label='item.className' 
            :value="item.classId">

            </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="性别" prop="stuSex">
            <el-radio-group v-model="formData.stuSex" size="medium">
              <el-radio
                v-for="(item, index) in sexOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as api from "../utils/api";
export default {
  inheritAttrs: false,
  props: ["title",'classData','formData'],
  data() {
    return {
          addFormData:{},
      titleMap: {
        addData: "添加学生信息",
        updateData: "修改学生信息",
        
      },
      rules: {
        stuName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        stuAge: [
          {
            required: true,
            message: "请输入年龄",
            trigger: "blur",
          },
        ],
        stuSex: [
          {
            required: true,
            message: "性别不能为空",
            trigger: "change",
          },
        ],
        className: [
          {
            required: true,
            message: "请选择班级",
            trigger: "change",
          },
        ],
      },
      sexOptions: [
        {
          label: "男",
          value:"男",
        },
        {
          label: "女",
          value: "女",
        },
      ],
    };
  },
  methods: {

    onOpen() {
      //打开对话框执行
    },
    onClose() {
      //关闭对话框执行清除以上字段内容//这个会在提交之前
//       this.$refs["elForm"].resetFields();
    },
    close() {
      //手工调用关闭，显示状态为隐藏
      this.$emit("close");
    },
    handelConfirm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          //点击确定后执行验证并执行方法,执行完毕后调用close()方法
          if (this.title === this.titleMap.addData) {
            //添加
           /*  this.formData.stuAge = parseInt(this.formData.stuAge); */
            console.log('添加上传的的数据');
            console.log(this.formData);
            this.axios({
              url: api.POST_ADDSTUDATA,
              method: "post",
              data: { data: this.formData },
            }).then((data) => {
              console.log("接受到的后端返回的值");
              console.log(data);
              if (data.data.state.code === 200) {
                this.$emit('gettableData',data.data.data)
                this.$message({
                  type: "success",
                  message: `添加学生成功`,
                });
                  this.$emit("close");
              }
            });
          } 
          else {
            //修改
        /*     this.form.stuAge = parseInt(this.form.stuAge); */
            this.axios({
              url: api.POST_UPSTUDATA,
              method: "post",
              data: { data: this.formData },
            }).then((data) => {
              console.log(data);
              if (data.data.state.code === 200) {
                  this.$emit('gettableData',data.data.data)
                this.$message({
                  type: "success",
                  message: `修改成功`,
                });
                this.$emit("close");
              }
            });
          }
        } 
        else this.$emit("close");
      });
    },
  
  },
};
</script>

